<template>
	<div class='myView'>
		<div class="main-left">
			<el-menu default-active="/Apage1" class="el-menu-vertical-demo" :router="true">
				<el-menu-item index="/Apage1" :class="{'isActive': active}">我的表格</el-menu-item>
				<el-menu-item index="/Apage2" :class="{'isActive': !active}">我的图片</el-menu-item>
				<el-menu-item index="/Apage3" :class="{'isActive': !active}">我的文字</el-menu-item>
				<el-menu-item index="/Apage4" :class="{'isActive': !active}">用户列表增删改查</el-menu-item>
			</el-menu>
		</div>
		<div class="main-right">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		data: function (){
	    return {
	      active:true
	    }
	  }
	}
</script>

<style>
.myView {
	display: flex;
	width:100%;
}

.main-left {
	text-align: center;
	width: 200px;
	float: left;
}

.main-right {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background-color: #fff;
	padding: 50px 70px;
}

.el-menu {
	background-color: transparent!important;
}
</style>